﻿
@{
    int id = (int)ViewBag.Id;
    int pid = (int)ViewBag.Pid;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CateGory</title>
    <link rel="stylesheet" href="~/Web/css/cateGory.css" />
</head>
<body>

    <div class="container-fulid" style="width: 70%; margin: 0 auto;">
        <div class="row type-block">
            <div class="col-md-12">
                <div class="BigCg">
                    <ul>
                        <li>前端</li>
                        <li>后端</li>
                        <li>java</li>
                        <li>Python</li>
                        <li>C++</li>
                        <li>typescript</li>
                        <li>QML</li>
                        <li>Vue</li>
                    </ul>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="type-block-Info">
                    <ul class="CgParentInfo">
                        <li>前端</li>
                        <li>后端</li>
                        <li>java</li>
                        <li>Python</li>
                        <li>C++</li>
                        <li>typescript</li>
                        <li>QML</li>
                        <li>Vue</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row article-c" style="background: #FFFFFF;">
            @*<div class="col-md-12" style="padding:0; border-bottom: solid 1px #E8E8ED;">
                <div class="article-box">
                    <a href="article.html" class="article-title-link">
                        <div class="article-title">
                            <span>这里是文章标题</span>
                        </div>
                    </a>

                    <a href="article.html" class="article-details-link">
                        <div class="row">
                            <div class="col-md-2">
                                <img src="/Image/default.png" alt="" width="160px" height="100px">
                            </div>

                            <div class="col-md-10" style="padding: 0;">
                                <div class="article-details">
                                    <div class="col-md-10" style="padding: 0;">
                                        <span>
                                            前沿从本文开始进入了新阶段，学习初阶数据结构和算法，以纯C实现，本文主要学习时间复杂度与空间复杂度，内容包括:算法效率，时间复杂度，空间复杂度，常见时间和空间 复杂度的练习
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>

                    <div class="userbox">
                        <div class="userinfo">
                            <div>
                                <img src="Image/userLike.png" alt="">
                                <span>64&nbsp;赞</span>
                            </div>

                            <div>
                                <img src="Image/userLike.png" alt="">
                                <span>0&nbsp;踩</span>
                            </div>

                            <div>
                                <span>作者</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12" style="padding:0; border-bottom: solid 1px #E8E8ED;">
                <div class="article-box">
                    <a href="article.html" class="article-title-link">
                        <div class="article-title">
                            <span>这里是文章标题</span>
                        </div>
                    </a>

                    <a href="article.html" class="article-details-link">
                        <div class="row">
                            <div class="col-md-2">
                                <img src="/Image/default.png" alt="" width="160px" height="100px">
                            </div>

                            <div class="col-md-10" style="padding: 0;">
                                <div class="article-details">
                                    <div class="col-md-10" style="padding: 0;">
                                        <span>
                                            前沿从本文开始进入了新阶段，学习初阶数据结构和算法，以纯C实现，本文主要学习时间复杂度与空间复杂度，内容包括:算法效率，时间复杂度，空间复杂度，常见时间和空间 复杂度的练习
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>

                    <div class="userbox">
                        <div class="userinfo">
                            <div>
                                <img src="Image/userLike.png" alt="">
                                <span>64&nbsp;赞</span>
                            </div>

                            <div>
                                <img src="Image/userLike.png" alt="">
                                <span>0&nbsp;踩</span>
                            </div>

                            <div>
                                <span>作者</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12" style="padding:0; border-bottom: solid 1px #E8E8ED;">
                <div class="article-box">
                    <a href="article.html" class="article-title-link">
                        <div class="article-title">
                            <span>这里是文章标题</span>
                        </div>
                    </a>

                    <a href="article.html" class="article-details-link">
                        <div class="row">
                            <div class="col-md-2">
                                <img src="/Image/default.png" alt="" width="160px" height="100px">
                            </div>

                            <div class="col-md-10" style="padding: 0;">
                                <div class="article-details">
                                    <div class="col-md-10" style="padding: 0;">
                                        <span>
                                            前沿从本文开始进入了新阶段，学习初阶数据结构和算法，以纯C实现，本文主要学习时间复杂度与空间复杂度，内容包括:算法效率，时间复杂度，空间复杂度，常见时间和空间 复杂度的练习
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>

                    <div class="userbox">
                        <div class="userinfo">
                            <div>
                                <img src="Image/userLike.png" alt="">
                                <span>64&nbsp;赞</span>
                            </div>

                            <div>
                                <img src="Image/userLike.png" alt="">
                                <span>0&nbsp;踩</span>
                            </div>

                            <div>
                                <span>作者</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12" style="padding:0; border-bottom: solid 1px #E8E8ED;">
                <div class="article-box">
                    <a href="article.html" class="article-title-link">
                        <div class="article-title">
                            <span>这里是文章标题</span>
                        </div>
                    </a>

                    <a href="article.html" class="article-details-link">
                        <div class="row">
                            <div class="col-md-2">
                                <img src="/Image/default.png" alt="" width="160px" height="100px">
                            </div>

                            <div class="col-md-10" style="padding: 0;">
                                <div class="article-details">
                                    <div class="col-md-10" style="padding: 0;">
                                        <span>
                                            前沿从本文开始进入了新阶段，学习初阶数据结构和算法，以纯C实现，本文主要学习时间复杂度与空间复杂度，内容包括:算法效率，时间复杂度，空间复杂度，常见时间和空间 复杂度的练习
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>

                    <div class="userbox">
                        <div class="userinfo">
                            <div>
                                <img src="Image/userLike.png" alt="">
                                <span>64&nbsp;赞</span>
                            </div>

                            <div>
                                <img src="Image/userLike.png" alt="">
                                <span>0&nbsp;踩</span>
                            </div>

                            <div>
                                <span>作者</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12" style="padding:0; border-bottom: solid 1px #E8E8ED;">
                <div class="article-box">
                    <a href="article.html" class="article-title-link">
                        <div class="article-title">
                            <span>这里是文章标题</span>
                        </div>
                    </a>

                    <a href="article.html" class="article-details-link">
                        <div class="row">
                            <div class="col-md-2">
                                <img src="/Image/default.png" alt="" width="160px" height="100px">
                            </div>

                            <div class="col-md-10" style="padding: 0;">
                                <div class="article-details">
                                    <div class="col-md-10" style="padding: 0;">
                                        <span>
                                            前沿从本文开始进入了新阶段，学习初阶数据结构和算法，以纯C实现，本文主要学习时间复杂度与空间复杂度，内容包括:算法效率，时间复杂度，空间复杂度，常见时间和空间 复杂度的练习
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>

                    <div class="userbox">
                        <div class="userinfo">
                            <div>
                                <img src="Image/userLike.png" alt="">
                                <span>64&nbsp;赞</span>
                            </div>

                            <div>
                                <img src="Image/userLike.png" alt="">
                                <span>0&nbsp;踩</span>
                            </div>

                            <div>
                                <span>作者</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>*@
        </div>
    </div>
    
    <div style="height: 90px;"></div>

    @*<script src="~/Web/js/GetCateGory.js"></script>*@
    @section Scripts
    {
        <script src="~/assets/vendor/jquery/jquery.js"></script>
        <script>

            $(document).ready(function () {
                $.get("../../../../Home/GetCateGory", function (data)
                {
                    let str = "<ul>";
                    for (var i = 0; i < data.length; i++) {
                        str += "<li><a href='../../../../Home/CateGory/" + data[i].id + "'>" + data[i].title + "</a></li>";
                    }
                    str += "</ul>";
                    $(".BigCg").html(str);

                    $.get("../../../../Home/GetCtType", {cgId: @id}, function (data)
                    {
                        //console.log(data);
                        $(".CgParentInfo").empty();
                        var str = "";
                        for(let i = 0; i < data.length; i++)
                        {
                            str += "<li style='margin-right:10px;'><a href='../../../../Home/CateGory/"+ @id +"/" + data[i].id + "'>"+ data[i].title +"</a></li>";
                        }
                        $(".CgParentInfo").html(str);
                    });

                }, "json");

    

                $.get("../../../../Home/GetCateGoryArticle",{id:@id,parentId:@pid}, function (data)
                {
                    $(".article-c").empty();
                    let str = "";
                    for (var i = 0; i < data.length; i++) {

                        str += "<div class='col-md-12' style='padding: 0; border-bottom: solid 1px #E8E8ED;'>";
                        str += "<div class='article-box'>";

                        str += "<a href='../../../Home/Article/" + data[i].id +"' class='article-title-link'>";
                        str += "<div class='article-title'>";
                        str += "<span>" + data[i].title + "</span>";
                        str += "</div>";
                        str += "</a>";

                        str += "<a href='../../Home/Article/" + data[i].id +"' class='article-details-link'>";
                        str += "<div class='row'>";
                        str += "<div class='col-md-2'>";
                        str += "<img src='../../../Web/Cover/" + data[i].photo +"' alt='' width='160px' height='100px'>";
                        str += "</div>";

                        str += "<div class='col-md-10' style='padding: 0;'>";
                        str += "<div class='article-details'>";
                        str += "<div class='col-md-10' style='padding: 0; '>";
                        str += "<span>"+ data[i].context +"</span>";
                        str += "</div>";
                        str += "</div>";
                        str += "</div>";
                        str += "</div>";
                        str += "</a>";

                        //str += "<a href='javascript:void(0);' class='article-details-link'>";
                        str += "<div class='userbox'>";
                        str += "<div class='userinfo'>";

                        str += "<div>";
                        str += "<img src='Image/userLike.png' alt=''>";
                        str += "<span>" + data[i].like +" &nbsp;赞</span>";
                        str += "</div>";

                        str += "<div>";
                        str += "<img src='Image/userLike.png' alt=''>";
                        str += "<span>" + data[i].trample + " &nbsp;踩</span>";
                        str += "</div>";

                        str += "<div>";
                        str += "<a href='../../../Home/AuthorInfo/"+ data[i].id +"'><span>" + data[i].author + "</span></a>";
                        //str += "";
                        str += "</div>";

                        str += "</div>";
                        str += "</div>";

                        str += "</div>";
                        str += "</div>";

                    }

                    $(".article-c").html(str);

                }, "json");
            });

        </script>
    }
</body>
</html>
